<template>
  <div class="app" :class="{ scrolling: isScrolling }">
    <div class="loading-bar" :class="{ visible: isLoading }"></div>
    <nav class="navbar">
      <div class="container">
        <router-link to="/" class="logo">TechShow</router-link>
        <div class="nav-links">
          <router-link to="/" class="nav-link">首页</router-link>
          <router-link to="/features" class="nav-link">特性</router-link>
          <router-link to="/demo" class="nav-link">演示</router-link>
          <router-link to="/about" class="nav-link">关于</router-link>
        </div>
      </div>
    </nav>

    <div class="router-view-container">
      <router-view v-slot="{ Component }">
        <transition name="fade" mode="out-in">
          <component :is="Component" />
        </transition>
      </router-view>
    </div>

    <footer class="footer">
      <div class="footer-content">
        <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer" class="beian-link">
          皖ICP备2024030829号-1
        </a>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import gsap from 'gsap'

const isLoading = ref(true)
const isScrolling = ref(false)
let scrollTimeout

const handleScroll = () => {
  if (!isScrolling.value) {
    isScrolling.value = true
  }
  clearTimeout(scrollTimeout)
  scrollTimeout = setTimeout(() => {
    isScrolling.value = false
  }, 1500)
}

onMounted(() => {
  // 模拟加载过程
  setTimeout(() => {
    isLoading.value = false
  }, 1000)

  // 添加滚动监听
  window.addEventListener('scroll', handleScroll, { passive: true })
  window.addEventListener('wheel', handleScroll, { passive: true })
  window.addEventListener('touchmove', handleScroll, { passive: true })

  // 导航链接动画
  gsap.from('.nav-link', {
    duration: 0.8,
    y: -20,
    opacity: 0,
    stagger: 0,
    ease: 'power4.out'
  })

  // Logo 动画
  gsap.from('.logo', {
    duration: 1,
    scale: 0,
    rotation: 360,
    ease: 'elastic.out(1, 0.5)'
  })
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
  window.removeEventListener('wheel', handleScroll)
  window.removeEventListener('touchmove', handleScroll)
  clearTimeout(scrollTimeout)
})
</script>

<style>
@import './styles/global.css';

/* 路由过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 导航栏样式 */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: 1rem 0;
  background: rgba(15, 25, 35, 0.6);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 1000;
  transition: all 0.3s ease;
}

.navbar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 255, 136, 0.1),
    rgba(0, 102, 255, 0.1),
    rgba(0, 255, 136, 0.1)
  );
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.navbar:hover::before {
  opacity: 1;
}

.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
}

.logo {
  font-size: 1.8rem;
  font-weight: bold;
  background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
  position: relative;
  transition: all 0.3s ease;
}

.logo::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.logo:hover::after {
  transform: scaleX(1);
}

.nav-links {
  display: flex;
  gap: 3rem;
  align-items: center;
}

.nav-link {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  position: relative;
  padding: 0.5rem 0;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

.nav-link::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 50%;
  width: 4px;
  height: 4px;
  background: var(--primary-color);
  border-radius: 50%;
  transform: translateX(-50%) scale(0);
  transition: transform 0.3s ease;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.nav-link:hover {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
}

.nav-link:hover::before {
  transform: translateX(-50%) scale(1);
}

.nav-link:hover::after {
  transform: scaleX(1);
}

.router-link-active {
  color: var(--primary-color) !important;
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
}

.router-link-active::before {
  transform: translateX(-50%) scale(1);
}

.router-link-active::after {
  transform: scaleX(1);
}

@media (max-width: 768px) {
  .navbar .container {
    padding: 0 1rem;
  }

  .logo {
    font-size: 1.5rem;
  }

  .nav-links {
    gap: 1.5rem;
  }

  .nav-link {
    font-size: 1rem;
  }
}

/* 确保容器不会溢出 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
  z-index: 1;
  height: 100%;
}

/* 路由视图容器样式 */
.router-view-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 60px; /* 为固定导航栏留出空间 */
}

@media (max-width: 768px) {
  .router-view-container {
    margin-top: 50px; /* 移动端导航栏高度较小 */
  }
}

/* 自定义滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background: var(--background-color);
  opacity: 0;
  transition: opacity 0.3s ease;
}

::-webkit-scrollbar-track {
  background: var(--background-color);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
  border-radius: 4px;
  border: 2px solid var(--background-color);
  transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(45deg, var(--secondary-color), var(--primary-color));
  border: 1px solid var(--background-color);
}

::-webkit-scrollbar-corner {
  background: var(--background-color);
}

/* 滚动时显示滚动条 */
.scrolling ::-webkit-scrollbar {
  opacity: 1;
}

/* 确保滚动条在Firefox中也能正常工作 */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--primary-color) var(--background-color);
}

.scrolling * {
  scrollbar-width: thin;
  scrollbar-color: var(--primary-color) var(--background-color);
}

/* 添加全局模糊效果 */
.app {
  position: relative;
  min-height: 100vh;
  background-color: var(--background-color);
  display: flex;
  flex-direction: column;
}

.app::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(100px);
  pointer-events: none;
  z-index: -1;
}

.footer {
  background: rgba(15, 25, 35, 0.6);
  backdrop-filter: blur(20px);
  padding: 1rem 0;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  flex-shrink: 0; /* 防止页脚被压缩 */
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 255, 136, 0.1),
    rgba(0, 102, 255, 0.1),
    rgba(0, 255, 136, 0.1)
  );
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.footer:hover::before {
  opacity: 1;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.beian-link {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  position: relative;
}

.beian-link:hover {
  color: var(--primary-color);
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
}

.beian-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.beian-link:hover::after {
  transform: scaleX(1);
}
</style>
